<template>
  <div>
    <el-upload
      :action="`${baseURL}upload/uploadFile`"
      :show-file-list="false"
      style="margin-bottom: 10px;"
      :on-success="handleSuccess"
      :before-upload="handlebeforeUpload"
      :on-error="handleError"
    >
      <el-button v-loading="loading" type="primary">{{
        value ? '重新上传' : '上传视频'
      }}</el-button>
    </el-upload>

    <video-player v-if="value !== ''" :options="options" />
  </div>
</template>
<script>
  import { videoPlayer } from 'vue-video-player'
  import 'video.js/dist/video-js.css'
  export default {
    name: 'VideoUpload',
    components: { videoPlayer },
    props: {
      value: String,
      required: true
    },
    data() {
      return {
        loading: false,
        options: {
          playbackRates: [0.5, 1.0, 1.5, 2.0, 3.0], // 可选的播放速度
          autoplay: false, // 是否自动播放
          muted: false, // 是否静音
          loop: false, // 是否开启循环播放
          preload: 'true', // 自动预加载
          language: 'zh-CN', // 语言，'en', 'zh-cn', 'zh-tw'
          aspectRatio: '16:9', // 播放器高宽占比（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [
            {
              type: 'video/mp4', // 类型
              src: ''
            }
          ],
          notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true, // 是否显示当前时间和持续时间的分隔符，"/"
            durationDisplay: true, // 是否显示持续时间
            remainingTimeDisplay: true, // 是否显示剩余时间
            fullscreenToggle: true // 是否显示全屏按钮
          }
        },
        baseURL: process.env.VUE_APP_BASE_API
      }
    },
    mounted() {
      if (this.value !== '') {
        this.options.sources[0].src = this.value
      }
    },
    updated() {
      if (this.value !== '') {
        this.options.sources[0].src = this.value
      }
    },
    methods: {
      handleSuccess(res, file) {
        const { data } = res
        if (data.fileUrl) {
          const videoUrl = data.fileUrl
          // 触发事件 input，父组件会修改绑定的 value 值
          this.options.sources[0].src = videoUrl
          this.$emit('input', videoUrl)
        }
        this.loading = false
      },
      handlebeforeUpload(file) {
        // 这里做可以做文件校验操作
        const isVideo = !/\.(mp4|avi)$/i.test(file.type)
        if (!isVideo) {
          this.$message.error('请检查视频格式是否正确!')
          return false
        }
        this.loading = true
      },
      handleError(err) {
        this.$message.error(err)
        this.loading = false
      }
    }
  }
</script>
